<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>余磊</title>
</head>
<link rel="stylesheet" href="./local-nav.css">
<link rel="stylesheet" href="./nav1.css">
<link rel="stylesheet" href="tool-box.css">
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    body{
        background-color: #fafafc;
        max-width: 540px;
        margin: 0 auto;
        height: 667px;
       
    }
    .nav2{
        position: relative;
        top: -105px;
        width: 100%;
        height: 110.06px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .nav2 li{
        flex:20%;
    }
    .nav2 li .sunav-icon{
        width: 28px;
        height: 28px;
        display: block;
        background: url("./image/fairy.png") ;
        background-size: 28px;
    }
    .nav2 li a{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #222;
        font-size: 10px;
    }
    .nav2 li .s2{
        background-position: 0 -28px;
    }
    .nav2 li .s3{
        background-position: 0 -56px;
    }
    .nav2 li .s4{
        background-position: 0 -84px;
    }
    .nav2 li .s5{
        background-position: 0 -112px;
    }
    .nav2 li .s6{
        background-position: 0 -139px;
    }
    .nav2 li .s7{
        background-position: 0 -168px;
    }
    .nav2 li .s8{
        background-position: 0 -196px;
    }
    .nav2 li .s9{
        background-position: 0 -280px;
    }
    .nav2 li .s10{
        background-position: 0 -252px;
    }
    




    .footer{
        width: 100%;
        background-color: #fff;
        height: 61px;
        display: flex;
    }
    .footer a{
        flex: 1;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        align-items: center;
        justify-self:center;
        color: #333;

    }


    .search-index {
            max-width: 540px;
            width: 100%;
            height: 60px;
            display: flex;
            position: fixed;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 100%;
            height: 60px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));

        }

        .search::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            width: 15px;
            height: 15px;
            background: url(./image/search.png) no-repeat;
            background-size: 15px;
        }

        .search {
            position: relative;
            height: 26px;
            line-height: 24px;
            border: 1px solid white;
            flex: 1;
            font-size: 12px;
            color: black;
            margin: 7px 10px;
            padding-left: 25px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(255, 252, 252, 0.2);
            background-color: white;
            margin-left: 20px;
            margin-top: 10px;
        }
        .user {
            margin-right: 10px;
            width: 44px;
            height: 44px;
            font-size: 12px;
            text-align: center;
            color: white;
            text-decoration: none;
        }

        .user::before {
            content: "";
            display: block;
            width: 23px;
            height: 23px;
            background: url("./image/my.png") no-repeat ;
            background-size: 23px;
            margin:5px 12px  0 12px;
        }


        .cm-silde{
            padding-top: 0px;
        }

        .cm-silde img {
            width: 100%;
            border-radius: 0px 0px 50px 50px;
        }
        .am {
            display: block;
            position: relative;
            top: -100px;
            padding: 0;
            font-size: 12px;
            color: #666;
            text-align: center;
            display: block;
        }

        .al {
            display: block;
            position: relative;
            top: -100px;
            margin: 0;
            padding: 5px 0;
            color: #999;
            font-size: 12px;
            text-align: center;
        }
</style>
<body>
    <!-- 搜索栏 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我的</a>
    </div>

    <!-- 顶部背景图片 -->
    <div class="cm-silde">
        <img src="image/bg.jpg" alt="">
    </div>

    <!-- 导航条0 -->
    
        <ul class="local-nav">
            <li><a href="javascript:;">
                <span class="icon-local x1"></span>
                <span>攻略·景点</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local x2"></span>
                <span>门票·活动</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local x3"></span>
                <span>美食林</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local x4"></span>
                <span>周边游</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local x5"></span>
                <span>一日游</span></a>
            </li>
        </ul>
    


    <!-- 导航条1 -->
    <div class="nav">
    <div class="hang a">
        <div class="lie"><a href="javascript:"><span>酒店</span></a></div>
        <div class="lie"><a href="javascript:"><span>民宿·客栈</span></a></div>
        <div class="lie"><a href="javascript:"><span>特价·爆款</span></a></div>
    </div>
    <div class="hang b">
        <div class="lie"><a href="javascript:"><span>机票</span></a></div>
        <div class="lie"><a href="javascript:"><span>火车票</span></a></div>
        <div class="lie"><a href="javascript:"><span>汽车·船票</span></a></div>
        <div class="lie"><a href="javascript:"><span>专车·租车</span></a></div>
    </div>
    <div class="hang c">
            <div class="lie"><a href="javascript:"><span>旅游</span></a></div>
            <div class="lie"><a href="javascript:"><span>私家团</span></a></div>
            <div class="lie"><a href="javascript:"><span>邮轮游</span></a></div>
            <div class="lie"><a href="javascript:"><span>定制游</span></a></div>
    </div>
    </div>

    <!-- 导航条2 -->
    
        <ul class="nav2">
            <li><a href="javascript:;">
                <span class="sunav-icon s1"></span>
                <span>自由行</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s2"></span>
                <span>WiFi电话卡</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s3"></span>
                <span>保险·签证</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s4"></span>
                <span>换钞·购物</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s5"></span>
                <span>向导·包车</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s6"></span>
                <span>特价机票</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s7"></span>
                <span>礼品卡</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s8"></span>
                <span>申卡·借钱</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s9"></span>
                <span>社区</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="sunav-icon s10"></span>
                <span>更多</span></a>
            </li>
        </ul>
    

    <!-- 底部导航条 -->
    
        <ul class="tool-box">
            <li><a href="javascript:;">
                <span class="icon-local t1"></span>
                <span>电话预定</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local t2"></span>
                <span>下载客户端</span></a>
            </li>
            <li><a href="javascript:;">
                <span class="icon-local t3"></span>
                <span>我的</span></a>
            </li>
        </ul>
        
    <!-- 底部 -->
        <div class="am">
        <a>网站地图</a>
        |
        <a> <img src="./image/网络.png" style="width: 11px; height: 11px;">language</a>
        |
        <a>电脑版</a>   

        </div>
        <div class="al">
            <a>©2021携程旅行</a>
            |
            <a>沪ICP备08023580号</a>
        </div>

    

    
</body>
</html>